<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>SSM 接口测试</title>
    <style>
        body {
            max-width: 600px;
            margin: 50px auto;
            font-family: Arial;
        }

        .container {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
        }

        input {
            padding: 8px;
            margin: 5px;
            width: 200px;
        }

        button {
            padding: 8px 20px;
            cursor: pointer;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
        }

        #result {
            margin-top: 10px;
            padding: 10px;
            border: 1px dashed #ccc;
        }
    </style>
</head>

<body>
    <h1>SSM 后台接口测试</h1>

    <!-- 1. GET 请求测试：根据ID查询用户 -->
    <div class="container">
        <h3>GET 请求 ： 查询用户</h3>
        <input type="number" id="userId" placeholder="输入用户ID（例：1）">
        <button onclick="getUser()">查询</button>
        <div id="getResult" class="result"></div>
    </div>

    <!-- 2. POST 请求测试：用户登录 -->
    <div class="container">
        <h3>POST 请求 - 用户登录</h3>
        <input type="text" id="username" placeholder="用户名（例：test1）"><br>
        <input type="password" id="password" placeholder="密码（例：123456）"><br>
        <button onclick="login()">登录</button>
        <div id="postResult" class="result"></div>
    </div>

    <!-- 引入 axios 发送请求（也可使用原生 fetch） -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        // 后台接口基础路径（与 Controller 前缀一致）
        const baseUrl = "http://localhost:8081/user";

        // 1. GET 请求：查询用户
        function getUser() {
            const id = document.getElementById("userId").value;

            axios.get(`${baseUrl}/${id}`)
                .then(response => {
                    // 显示结果（格式化JSON）
                    document.getElementById("getResult").innerText = JSON.stringify(response.data, null, 2);
                })
                .catch(error => {
                    document.getElementById("getResult").innerText = "请求失败：" + error.message;
                });
        }

        // 2. POST 请求：用户登录
        function login() {
            const username = document.getElementById("username").value;
            const password = document.getElementById("password").value;

            axios.post(`${baseUrl}/login`, { username, password }, {
                headers: { "Content-Type": "application/x-www-form-urlencoded" }
            })
                .then(response => {
                    document.getElementById("postResult").innerText = JSON.stringify(response.data, null, 2);
                })
                .catch(error => {
                    document.getElementById("postResult").innerText = "请求失败：" + error.message;
                });
        }
    </script>
</body>

</html>